<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-form label-width="100px" inline label-position="left">
        <el-input
          clearable
          @keyup.enter.native="handleFilter"
          v-model="listQuery.userName"
          style="width: 200px; margin-right: 15px; margin-top: 7px"
          class="filter-item"
          maxlength="20"
          placeholder="名称（物业）"
        />

        <el-input
          clearable
          @keyup.enter.native="handleFilter"
          v-model="listQuery.userAccount"
          style="width: 200px; margin-right: 15px; margin-top: 7px"
          class="filter-item"
          maxlength="20"
          placeholder="账号（物业）"
        />
        <el-input
          clearable
          @keyup.enter.native="handleFilter"
          v-model="listQuery.userPhone"
          style="width: 200px; margin-right: 15px; margin-top: 7px"
          class="filter-item"
          maxlength="20"
          placeholder="手机号（物业）"
        />
        <el-input
          clearable
          @keyup.enter.native="handleFilter"
          type="number"
          v-model="listQuery.equipmentId"
          style="width: 200px; margin-right: 15px; margin-top: 7px"
          class="filter-item"
          placeholder="设备Id"
        />
        <el-input
          clearable
          @keyup.enter.native="handleFilter"
          v-model="listQuery.equipmentNumber"
          style="width: 200px; margin-right: 15px; margin-top: 7px"
          class="filter-item"
          maxlength="20"
          placeholder="请输入设备编号"
        />
        <!-- 2022.09.07  合并为时间日期选择器 -->
      <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:00"
        @change="getDateTime"
      >
      </el-date-picker>


        <!-- <el-date-picker
          v-model="listQuery.startTime"
          type="datetime"
          style="width: 200px; margin-right: 15px; margin-top: 7px"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择开始日期"
        ></el-date-picker>
        <el-date-picker
          v-model="listQuery.endTime"
          type="datetime"
          style="width: 200px; margin-right: 15px; margin-top: 7px"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择结束日期"
        ></el-date-picker> -->
      </el-form>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="handleFilter"
        >搜索</el-button
      >
      <el-button
        type="primary"
        class="filter-item"
        @click="handleDownload"
        icon="el-icon-download"
        :loading="downloadLoading"
        >导出</el-button
      >

      <span style="color: red"
        >数据仅供参考（注意：计算每月1号，与上月1号的差值--上月数据可能是相隔多月）</span
      >
    </div>

    <!-- table 表格 -->
    <el-table
      :data="list"
      v-loading="loading.list"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
      max-height="830"
    >
      <el-table-column label="序号" type="index" width="80px" align="center">
      </el-table-column>
      <el-table-column
        label="名称（物业）"
        prop="userName"
        align="center"
        width="200"
      />
      <el-table-column label="账号（物业）" prop="userAccount" align="center" />
      <el-table-column label="手机号（物业）" prop="userPhone" align="center" />
      <el-table-column label="设备Id" prop="equipmentId" align="center" />
      <el-table-column label="设备编号" prop="equipmentNumber" align="center" />
      <el-table-column
        label="使用电量(度)"
        sortable
        prop="electricQuantity"
        align="center"
      />
      <el-table-column
        label="间隔时间"
        sortable
        prop="time"
        align="center"
        width="500"
      />
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.offset"
        :page-sizes="[10, 20, 30, 40, 100, 300, 500, 5000]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 回到顶部 -->
    <BackToTop></BackToTop>
  </div>
</template>
<script>
import {
  getElectricQuantityList,
  getBackMonthList,
  getEstateMonthlyRent,
} from "@/api/equipmentEle";

import CountTo from "vue-count-to";
import BackToTop from "@/components/BackToTop";
import VePie from "v-charts/lib/pie";
import pcq from "@/components/index";
import Velocity from "velocity-animate";
import "velocity-animate/velocity.ui.js";
import { parseTime } from "@/utils";
export default {
  name: "electricQuantity_mounthList",
  components: {
    CountTo,
    BackToTop,
    VePie,
    pcq,
  },
  data() {
    return {
      dateTime:"",
      estateMonthlyRent: 0,

      agentType: this.$store.state.user.userInfo.managerType,

      chartData: null,
      estateList: [],
      maintainList: [],
      loading: {
        list: false,
        add: false,
        detele: false,
        upd: false,
      },
      dialog: {
        bind: false,
        add: false,
        upd: false,
        view: false,
      },
      imgList: [],
      total: 0,
      downloadLoading: false,
      date: "",
      listQuery: {
        offset: 1,
        limit: 10,
        equipmentNumber: "",
        equipmentId: "",
        userName: "",
        userAccount: "",
        userPhone: "",
        startTime: "",
        endTime: "",
      },
      list: null,
      chargeRules: [],
      equipmentCount: 0,
      showPic: "",
      dialogVisible: false,
    };
  },

  methods: {
        getDateTime(value) {
      if (value) {
        this.listQuery.startTime = value[0];
        this.listQuery.endTime = value[1];
      } else {
        this.listQuery.startTime = "";
        this.listQuery.endTime = "";
      }
    },
    // 获取电量列表
    async getElectricList() {
      this.loading.list = true;
      try {
        //调用服务器接口
        const { data } = await getBackMonthList({ ...this.listQuery });
        this.list = data.records.map((item, index) => ({
          index: index + 1,
          electricQuantity: Math.abs(
            this.devds(item.eelectricQuantity, item.celectricQuantity)
          ),
          time: item.etime + "--" + item.ctime,
          ...item,
        }));

        this.total = data.total;
      } catch (error) {}
      this.loading.list = false;
    },
    devds(arg1, arg2) {
      var r1, r2, m, n;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      //last modify by deeka
      //动态控制精度长度
      n = r1 >= r2 ? r1 : r2;
      return ((arg1 * m - arg2 * m) / m).toFixed(n);
    },
    //导出
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = [
          "序号",
          "名称（物业）",
          "账号（物业）",
          "手机号（物业）",
          "设备Id",
          "设备编号",
          "累计电量(度)",
          "间隔时间",
        ];
        const filterVal = [
          "index",
          "userName",
          "userAccount",
          "userPhone",
          "equipmentId",
          "equipmentNumber",
          "electricQuantity",
          "time",
        ];
        const data = this.formatJson(filterVal, this.list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "月电量消耗列表",
        });
        this.downloadLoading = false;
      });
    },
    // 数据筛选
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },

    floatSub(arg1, arg2) {
      var r1, r2, m, n;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      // 动态控制精度长度
      n = r1 >= r2 ? r1 : r2;
      return ((floatMultiply(arg1, m) - floatMultiply(arg2, m)) / m).toFixed(n);
    },
    handleFilter() {
      this.listQuery.offset = 1;
      this.getElectricList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getElectricList();
    },
    handleCurrentChange(val) {
      this.listQuery.offset = val;
      this.getElectricList();
    },
  },

  created() {
    // this.getEquipmentLists();

    this.getElectricList();
    //   (this.provices = getAddressByAreaId(0)), this.getCities();
    //  this.getAreas();
  },
};
</script>
<style lang="scss" scoped>
.el-button + .el-button {
  margin-left: 0px;
}
</style>
